<template>
  <div class="vv">
    <div v-if="webData.length <= 0" class="nodata" @click="addNet">
      <span>暂无收藏信息</span>
    </div>
    <div v-else class="data">
      <div class="card" v-for="(item, index) in webData" :key="index">
        <p class="cardTitle">
          {{ item.title }} <span class="cardId">id：{{ item.id }}</span>
        </p>
        <p class="cardCon" @click="go(item.url)">
          <span class="utext">网址：</span
          ><span class="uurl">{{ item.url }}</span>
        </p>
        <div class="cardCon2">
          <div class="ttext">网址备注：</div>
          <div>
            <textarea
              name=""
              :id="item.id"
              cols="30"
              rows="4"
              class="tarea"
              :disabled="index !== editIndex"
              placeholder="收藏时的看法"
              :value="item.info"
            ></textarea>
          </div>
        </div>
        <div class="edit">
          <p v-if="index == editIndex">
            <el-button
              type="primary"
              @click="editSave(index, item)"
              size="small"
              plain
              >保存</el-button
            >
            <el-button type="info" @click="editCancel()" size="small" plain
              >取消</el-button
            >
          </p>
          <p v-else>
             <el-button type="danger" @click="del( item)" size="small" icon="el-icon-delete"  plain  >删除</el-button>
             <el-button type="primary" @click="edit(index, item.id)" size="small" icon="el-icon-edit"  plain  >编辑</el-button>
          </p>
          
        </div>
      </div>
      <div class="card">
        <p class="cardTitle">新增网址</p>
        <el-tooltip class="item" effect="light" content="听说你又捡到了宝贝网站" placement="right" offset='-50' hide-after='300'>
           <div class="addUrl" @click="addNet"></div>
        </el-tooltip>
        
      </div>
    </div>
    <el-dialog title="新增网址" v-model="dialogFormVisible" width='500px'>
      <el-form :model="form">
        <el-form-item label="id" label-width="80px">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="网址名称" label-width="80px">
          <el-input v-model="form.title" ></el-input>
        </el-form-item>
        <el-form-item label="网址路由" label-width="80px">
          <el-input v-model="form.url" ></el-input>
        </el-form-item>
        <el-form-item label="网址备注" label-width="80px">
          <textarea name="" id="" cols="50" rows="5" v-model="form.text"></textarea>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveAddNet">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs, watch } from "vue";

export default defineComponent({
  props: {
    vdata:String,
  },
  setup(props) {
    let state = reactive({
      webData:[],
      editIndex: 999,
      dialogFormVisible:false,
      form:{
          id:0,
          title:'',
          url:'',
          text:''
      }
    });

    let { ctx } = getCurrentInstance();

    onMounted(async ()=>{
       let res=await ctx.$axios.get('/webnet',{data:props.vdata})
       state.webData=res.data?res.data:[]
       console.log(state.webData,'------------------------')
    })
    watch(props,async()=>{
        let res=await ctx.$axios.get('/webnet',{data:props.vdata})
        state.webData=res.data?res.data:[]
    })

    let edit = (index, id) => {
      let doc = document.getElementById(id);
      state.editIndex = index;
    };
    let del=(item)=>{
         ctx.$confirm(`此操作将永久删除${item.title}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
           let res=await ctx.$axios.post('/delWeb',{id:item.id,type:props.vdata})
           if(res.status==200){
              let ress=await ctx.$axios.get('/webnet',{data:props.vdata})
              state.webData=ress.data?ress.data:[]
              ctx.$message({
              type: 'success',
              message: '删除成功!'
              });
           }
        }).catch(() => {
          ctx.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
    let editSave = (index, item) => {
      let doc = document.getElementById(item.id);
      item.info=doc.value
      ctx.$axios.post("/editNet", {type:props.vdata,id:item.id,text:doc.value});
      state.editIndex = 999;
    };
    let editCancel = () => {
      state.editIndex = 999;
    };
    let go = (url) => {
      window.open(url);
    };

    let addNet=()=>{
        state.dialogFormVisible=true
        if(state.webData.length>0){
           let id=Number(state.webData[state.webData.length-1].id.slice(1)-0)+1 
           let newId=id>10?(props.vdata+id):(props.vdata+'0'+id)
           state.form.id=newId
        }else{
           state.form.id=props.vdata+'01'
        }
        
    }
    let saveAddNet=async ()=>{
       let res=await ctx.$axios.post('/addNet',{type:props.vdata,data:state.form})
       if(res.status==200){
           ctx.$message.success('添加成功')
       }
       let res2=await ctx.$axios.get('/webnet',{data:props.vdata})
       state.webData=res2.data
       state.dialogFormVisible=false
       state.form={
          id:0,
          title:'',
          url:'',
          text:''
       }
    }
    return {
      ...toRefs(state),
      edit,
      editSave,
      editCancel,
      go,
      addNet,
      saveAddNet,
      del
    };
  },
});
</script>

<style lang='less' scoped>
.vv {
  width: 100%;
  display: flex;
}
.nodata {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto;
  background: url("../../../assets/img/nodata.png") no-repeat;
  background-position: 50%;
  background-size: 300px 200px;
  text-align: center;
  span {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 50px);
    width: 100px;
    display: block;
  }

}
.data {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  .card {
    min-width: 200px;
    max-width: 400px;
    width: 31%;
    height: 200px;
    margin: 15px 0 0 15px;
    border-radius: 5px;
    background: linear-gradient(to right top, #87ced6, #76e2ee);
    box-shadow: 2px 2px 2px #c0e1f5e7, -2px -2px 2px #c0e1f5e7,
      2px -2px 2px #c0e1f5e7, -2px 2px 2px #c0e1f5e7;
    .cardTitle {
      display: block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid #326598;
      font-size: 22px;
      margin-bottom: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      .cardId {
        font-size: 14px;
        float: right;
        margin-right: 10px;
        color: #24221c;
      }
      @media all and (max-width:1000px) {
        span{
          display: none;
        }
  }
    }
    .cardCon {
      display: block;
      width: 100%;
      height: 25px;
      line-height: 25px;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-left: 10px;
      overflow: hidden;
      .utext {
        margin-right: 5px;
      }
      .uurl {
        color: #1e118d;
        cursor: pointer;
      }
      .uurl:hover {
        color: rgba(0, 17, 255);
      }
    }
    .cardCon2 {
      width: 100%;
      padding: 0 10px;
      display: flex;
      margin-top: 10px;
      .ttext {
        height: 25px;
        line-height: 25px;
        white-space: nowrap;
      }
      .tarea {
        width: 100%;
        display: block;
        border: #666666;
        padding: 5px 5px;
        color: #000;
      }
    }
    .edit {
      width: 100%;
      margin-top: 8px;
      padding-right: 10px;
      text-align: right;
    }
  }
}
.addUrl {
  width: 100%;
  height: 160px;
  background: url("../../../assets/img/nodata.png") no-repeat;
  background-position: 50%;
  background-size: 100%;
}

  
</style>